<template>
  <div fluid grid-list-md class="agent-query-container">
    <v-layout row wrap align-content-start>
      <v-flex md12 class="chip-selector">
         <v-btn icon class="mx-1" @click="routerBack">
          <v-icon>keyboard_backspace</v-icon>
         </v-btn>
         <span class="title">玩家「{{nickname}}」「{{cardName}}」卡的卡片增减记录</span>
      </v-flex>

      <v-flex d-flex md12 class="overflow-table">
        <!-- 查询数据表格 -->
        <div class="table-container pos-abs">
          <v-data-table hide-actions :loading="showProgress" :headers="headers" :items="tableData" class="elevation-1">
            <v-progress-linear slot="progress" color="teal" height="5" indeterminate></v-progress-linear>
            <template slot="items" slot-scope="props">
              <td class="text-xs-center subheading">{{ props.item.lftid }}</td>
              <td class="text-xs-center">
                <v-avatar size="36">
                  <img :src="props.item.headUrl" alt="头像">
                </v-avatar>
              </td>
              <td class="text-xs-center subheading">{{ props.item.nickname }}</td>
              <td class="text-xs-center subheading">{{ props.item.operaType }}</td>
              <td class="text-xs-center subheading">{{ props.item.cardName }} 卡</td>
              <td class="text-xs-center subheading">{{ props.item.operaCount }}</td>
              <td class="text-xs-center subheading">{{ props.item.remainCount }}</td>
              <td class="text-xs-center subheading">{{ getTime(props.item.time) }}</td>
            </template>
            <!-- 没有数据时显示的提示 -->
            <template slot="no-data">
              <div class="text-md-center">
                <v-icon color="yellow darken-3">warning</v-icon>
                <span class="subheading">暂无数据</span>
              </div>
            </template>
          </v-data-table>
          <!-- 表格分页 -->
          <div class="text-xs-center my-2">
            <v-pagination @input="pageChange" circle :length="pagination.pageCount" :total-visible="pagination.totalVisible" v-model="pagination.page"></v-pagination>
          </div>
        </div>
      </v-flex>
    </v-layout>
  </div>
</template>
<script>
import { card } from "../../api/activity";
import { getTime } from "../../util";
export default {
  data: () => ({
    showProgress: false,
    limit: 10,
    offset: 0,
    dialog: false,
    isSearch: false,
    pagetype: 1,
    pagination: {
      page: 1,
      pageCount: 1,
      totalVisible: 7
    },
    tableData: [],
    headers: [
      { text: "玩家ID", value: "lftid", align: "center", sortable: false },
      { text: "头像", value: "headUrl", align: "center", sortable: false },
      { text: "昵称", value: "nickname", align: "center", sortable: false },
      { text: "类型", value: "superId", align: "center", sortable: false },
      { text: "名称", value: "superId", align: "center", sortable: false },
      { text: "数量", value: "superId", align: "center", sortable: false },
      { text: "剩余数量", value: "superId", align: "center", sortable: false }, 
      { text: "操作时间", value: "actions", align: "center", sortable: false },
    ],
    editedIndex: -1,
    editedItem: {
      uid: "",
      name: "",
      headUrl: 0,
      lftid: 0,
      nickname: 0,
      telephone: 0,
      superId: 0,
      saleLevel: 1,
      proxyLevel: 1,
      createTime: "2018-4-19"
    },
    rewardType: 1,
    nickname: '',
    cardName: ''
  }),
  mounted() {
    this.$nextTick(() => {
      $Vue.$off("refreshPage");
      $Vue.$on("refreshPage", () => {
        this.refresh();
      });
      $Vue.$off("areaCodeChange");
      $Vue.$on("areaCodeChange", () => {
        this.refresh();
      });
    });
    this.uid = this.$route.query.uid
    this.rewardType = this.$route.query.type.match(/\d+/g)[0]
    this.getCardRecordList();
    // this.pagetype = Number(this.$route.query.pagetype)
  },
  methods: {
    getTime,
    refresh() {
      this.isSearch = false;
      this.offset = 0;
      this.chipSelected = 1;

      this.pagination.page = 1;
      this.getCardRecordList();
    },
    // 获取代理列表
    getCardRecordList() {
      const qs = {
        limit: this.limit,
        offset: this.offset,
        uid: this.uid,
        rewardType: this.rewardType
      };
      this.showProgress = true;
      card.getCardRecordList.r(qs).then(({ data }) => {
        console.log('getCardRecordList', data)
        if (data.result === 0) {
          let $data  = data.data;
          if ($data) {
            let rankData = $data.voList;
            this.tableData = rankData;
            if(rankData[0]) {
              this.nickname = rankData[0].nickname
              this.cardName = rankData[0].cardName
            }
            this.pagination.pageCount = $data.totalRow ?
              Math.ceil($data.totalRow / this.limit) :
              1;
          }
        } else {
          $Vue.$emit("toggleSnackbar", {
            text: data.message
          });
        }
        this.showProgress = false;
      });
    },
    initialize() {
      this.tableData = [{
        headUrl: "https://countryflags.io/cn/flat/32.png",
        lftid: 103214,
        nickname: "搭街坊",
        superId: 123000,
        saleLevel: 1,
        sales: 888,
        proxyLevel: 1,
        createTime: "2018-4-19",
        totalSale: 3655,
        ranking: 1,
        color: "red"
      }];
    },
    routerBack() {
      this.$router.push('/activity/cardmag?tabs=2')
    },
    pageChange(page) {
      this.offset = (page - 1) * this.limit;
      if (!this.isSearch) {
        this.getCardRecordList();
      } else {
        // ***
        this.search("wyvj");
      }
    },
    chipClicked(item) {
      this.chipSelected = item.value;
      this.pagination.page = 1;
      this.offset = 0;
      this.getCardRecordList();
    }
  }
};
</script>
<style lang="less" scoped>
</style>